import { searchapi } from "@/apis/essay";
import React, { useEffect, useState } from "react";
import { Searchresultwrap } from "./styled";
import Routertran from "@/components/routertran";
import { useNavigate } from "react-router-dom";
interface propsv {
  searchv: string;
}
export default function Searchresult(props: propsv) {
  const navigate = useNavigate();
  const [result, setResult] = useState<
    { title: string; content: string; id: number }[]
  >([]);
  //记录查询消耗的时间
  const [time, setTime] = useState<number>(0);
  const { searchv } = props;
  useEffect(() => {
    let cur = Date.now();
    searchapi(searchv).then((res: any) => {
      setResult(res.result);
      setTime(Date.now() - cur);
    });
  }, [searchv]);
  return (
    <Searchresultwrap>
      <div className="top">
        找到 {result.length} 条结果，用时 {time} 毫秒
      </div>
      <hr />
      <ul>
        {result.length > 0 ? (
          result.map((item) => (
            <li
              onClick={(e) => {
                navigate(`/essaydetail/${item.id}`);
              }}
              key={item.id}
            >
              <div className="title">{item.title}</div>
              <div className="content">{item.content}</div>
              <hr />
            </li>
          ))
        ) : (
          <>
            <h2 style={{ margin: "20px auto", width: 100 }}>没有数据</h2>
            <Routertran
              left={100}
              top={100}
              width={400}
              height={400}
            ></Routertran>
          </>
        )}
      </ul>
    </Searchresultwrap>
  );
}
